<template>
    <div id="container" style="width: 100%; height:800px"></div>
</template>
<script>
import { Graph, Shape } from '@antv/x6'
//对齐线
import { Snapline } from '@antv/x6-plugin-snapline'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { Selection } from '@antv/x6-plugin-selection'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { History } from '@antv/x6-plugin-history'
import { Transform } from '@antv/x6-plugin-transform'
import { Dnd } from '@antv/x6-plugin-dnd'

export default {
    name: "TestCom",
    data() {
        return {
            graph: null
        };
    },
    mounted() {

        this.initGraph();

    },
    methods: {
        initGraph() {
            this.graph = new Graph({
                container: document.getElementById('container'),
                autoResize: true,
                connecting: {
                    snap: true,
                },
                grid: {
                    visible: true,
                    type: 'doubleMesh',
                    args: [
                        {
                            color: '#eee', // 主网格线颜色
                            thickness: 1, // 主网格线宽度
                        },
                        {
                            color: '#ddd', // 次网格线颜色
                            thickness: 1, // 次网格线宽度
                            factor: 4, // 主次网格线间隔
                        },
                    ],
                },
                background: {
                    color: '#F2F7FA',
                },
                // 画布平移
                panning: {
                    enabled: true,
                    //  modifiers:拖拽可能和其他操作冲突，，
                    // 设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。
                    modifiers: 'Ctrl',
                    // eventTypes:设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，
                    // 默认为 ['leftMouseDown']
                    eventTypes: ['leftMouseDown']
                },
                mousewheel: { // 放大
                    enabled: true,
                    modifiers: 'Ctrl',
                    maxScale: 4,
                    minScale: 0.2,
                },
                interacting: {
                    nodeMovable: true, //节点是否可以移动
                    edgeMovable: true, //边是否可以被移动
                },
                // 连接桩样式
                highlighting: {
                    // 连接桩吸附连线时在连接桩外围围渲染一个包围框
                    magnetAdsorbed: {
                        name: 'stroke',
                        args: {
                            attrs: {
                                fill: '#8f8f8f',
                                fillOpacity: '0.3',
                                stroke: '#fff',
                                strokeOpacity: '0'
                            },
                        },
                    },
                },
            })


            //使用对齐线
            this.graph.use(
                new Snapline({
                    sharp: true,
                    enabled: true,
                    resizing: true,
                    tolerance: 20
                }),
            )
            this.graph.use(
                new Clipboard({
                    enabled: true,
                }),
            )
            // 框选
            this.graph.use(
                new Selection({
                    enabled: true,
                    multiple: true,
                    rubberband: true,
                    movable: true,
                    showNodeSelectionBox: true,
                    showEdgeSelectionBox: true,
                    pointerEvents: 'none'
                })
            )
            this.graph.use(
                new Keyboard({
                    enabled: true,
                    global: true,
                }),
            )
            this.graph.use(
                new History({
                    enabled: true,
                }),
            )
            // 图形变换
            this.graph.use(
                new Transform({
                    // 调整大小
                    resizing: {
                        enabled: false
                    },
                    // 旋转角度
                    rotating: {
                        enabled: false
                    }
                }),
            )

            const source = this.graph.addNode({
                x: 300,
                y: 40,
                width: 80,
                height: 40,
                label: 'Hello',
            })
            this.graph.addNode({
                x: 200,
                y: 100,
                width: 80,
                height: 40,
                label: 'Drag Me',
                attrs: {
                    body: {

                    },
                },
            })

            const target = this.graph.addNode({
                x: 420,
                y: 180,
                width: 80,
                height: 40,
                label: 'World',
            })

            this.graph.addEdge({
                source: source,
                target: target,
                label: 'edge'
            })
            // 复制
            this.graph.bindKey('ctrl+c', () => {
                const cells = this.graph.getSelectedCells()
                if (cells.length) {
                    this.graph.copy(cells)
                }
                return false
            })
            // 粘贴
            this.graph.bindKey('ctrl+v', () => {
                if (!this.graph.isClipboardEmpty()) {
                    const cells = this.graph.paste({ offset: 32 })
                    this.graph.cleanSelection()
                    this.graph.select(cells)
                }
                return false
            })
            // 删除
            this.graph.bindKey('Backspace', () => {
                const cells = this.graph.getSelectedCells()
                if (cells.length) {
                    this.graph.removeCells(cells)
                }
                return false
            })
            // 撤销
            this.graph.bindKey('ctrl+z', () => {
                this.graph.undo()
            })
            // 恢复
            this.graph.bindKey('ctrl+y', () => {
                this.graph.redo()
            })
            //设置连接桩的样式以及出现位置
            const ports = {
                groups: {
                    top: {
                        position: 'top',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#5F95FF',
                                strokeWidth: 1,
                                fill: '#fff',
                                style: {
                                    visibility: 'hidden',
                                },
                            },
                        },
                    },
                    right: {
                        position: 'right',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#5F95FF',
                                strokeWidth: 1,
                                fill: '#fff',
                                style: {
                                    visibility: 'hidden',
                                },
                            },
                        },
                    },
                    bottom: {
                        position: 'bottom',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#5F95FF',
                                strokeWidth: 1,
                                fill: '#fff',
                                style: {
                                    visibility: 'hidden',
                                },
                            },
                        },
                    },
                    left: {
                        position: 'left',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#5F95FF',
                                strokeWidth: 1,
                                fill: '#fff',
                                style: {
                                    visibility: 'hidden',
                                },
                            },
                        },
                    },
                },
                items: [
                    {
                        group: 'top',
                    },
                    {
                        group: 'right',
                    },
                    {
                        group: 'bottom',
                    },
                    {
                        group: 'left',
                    },
                ],
            }
            // 控制连接桩显示/隐藏
            const showPorts = (ports, show) => {
                for (let i = 0, len = ports.length; i < len; i = i + 1) {
                    ports[i].style.visibility = show ? 'visible' : 'hidden'
                }
            }
            //鼠标悬停显示连接桩
            this.graph.on('node:mouseenter', () => {
                const container = document.getElementById('container')
                const ports = container.querySelectorAll(
                    '.x6-port-body',
                )
                showPorts(ports, true)
            })
            //鼠标离开隐藏连接桩
            this.graph.on('node:mouseleave', () => {
                const container = document.getElementById('container')
                const ports = container.querySelectorAll(
                    '.x6-port-body',
                )
                showPorts(ports, false)
            })
        },
        async handleEvent(event) {
            switch (event.keyCode) {
                case 67:
                    console.log('ctrl + c')
                    this.onCopy();
                    break
            }
        },

    },
};
</script>
<style>
.x6-widget-selection-box {
    border: 2px dashed #239edd;
}

.x6-widget-selection-inner {
    border: 1px solid #239edd;
}

.snapline-app {
    display: flex;
    padding: 0;
    font-family: sans-serif;

    .app-side {
        bottom: 0;
        padding: 0 8px;

        .slider-value {
            display: inline-block;
            margin-left: 8px;
            padding: 3px 7px;
            color: #333;
            font-size: 12px;
            line-height: 1.25;
            background: #eee;
            border-radius: 10px;
        }
    }

    .app-content {
        flex: 1;
        margin-right: 8px;
        margin-left: 8px;
        box-shadow: 0 0 10px 1px #e9e9e9;
    }

    .ant-card {
        box-shadow: 0 0 10px 1px #e9e9e9;
    }

    .ant-card-head-title {
        text-align: center;
    }

    .ant-row {
        margin: 16px 0;
        text-align: left;
    }
}
</style>